<template>
	<view>
		<!-- 正文内容 -->
		<!-- 轮播图 -->
		<view class="wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item ,index ) in bannerlist" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item.image" mode=""></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="content">
			<view class="tab_box d-flex justify-space-between mt-4">
				<view class="tab_item flex-column justify-center align-center" v-for="(item , index) in tabs"
					:key="index+'tab'" @click="handTab(item)">
					<image class="mb-2" :src="item.image" mode=""></image>
					<view><text>{{item.name}}</text></view>
				</view>
			</view>
			<view class="mb-4">
				<uv-tabs :list="tablist" lineWidth="30" @click="change" :scrollable="false" lineColor="#01E305"
					:activeStyle="{
					color:'#01E305'
				}"></uv-tabs>
			</view>
			<view class="product-item mb-4" v-for="(item , index) in products" :key="index+'pro'">
				<view class="" style="display: flex;margin-bottom: 10px;">
					<view class=""
						style=" margin-top: 4px;background: rgb(238, 244, 250);border-radius: 5px;padding: 10rpx;">
						{{item.cardname}}
					</view>
				</view>
				<view class="  d-flex">
			
					<view class="product-image-box mr-4">
						<image class="banner" :src="item.image" mode="">
			
						</image>
					</view>
					<view class="product-conten">
						<view class="d-flex align-center">
							<view class="d-flex copy align-center" @click="handCopy(item.id)">
								<text class="mr-2">商品ID:{{item.id}}</text>
								<image class="copyimage" src="../../static/indexImages/copy.png" mode=""></image>
							</view>
						</view>
						<view class="mt-3 d-flex align-center u-flex-wrap">
							<view class="mr-1 tag-item error" @click="handTag(item)">
								禁发区域
								<text>></text>
								<u-icon name="arrow-right" color="#F93A4A" size="28"></u-icon>
							</view>
						</view>
						<view class="mt-6 d-flex align-center justify-space-between" >
							<view class="d-flex price align-end">
								<text>¥</text>
								<text class="font-20">佣金:{{item.own_money || 0.00}}</text>
							</view>
							
						</view>
			
					</view>
				</view>
				<view class="tc-describe mt-4 pt-3 mb-2"
					@click="handPackageDescription(item.pack_desc,item.commission_desc)">
					<view class="d-flex align-center justify-space-between">
						<view class="d-flex align-center">
							<uni-icons type="info-filled" color="#000" size="20"></uni-icons>
							<text class="tc-title mr-1 ml-1">套餐说明:</text>	
						</view>
						<uni-icons type="right" color="#000" size="20"></uni-icons>
			
					</view>
				</view>
				<view class="d-flex justify-space-between">
					<view class="mr-1 boxGoods" @click="editGoodsFn(item)">
						编辑
					</view>
					<view class="mr-2 boxGoods" style="color: rgb(222, 142, 143);" @click="xiajia(item.id)">
						下架
					</view>
					<view class="mr-2 boxGoods" @click="handAddagent(item.id)">
						专属链接
					</view>
					<view class="mr-2 boxGoods" @click="Generateposter(item)">
						生成海报
					</view>
					<view class="mr-2 boxGoods"  style="color: #1FA1FF;"
						@click="allFenyong(item.id,item.commission_money)">
						更多
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerlist: [ //轮播图数据
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tabs: [ //金刚区数据
					{
						id: 0,
						name: '靓号查询',
						image: ('../../static/indexImages/newtab1.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 1,
						name: '一证查询',
						image: ('../../static/indexImages/newtab2.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 2,
						name: '订单查询',
						image: ('../../static/indexImages/newtab3.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 3,
						name: '分享店铺',
						image: ('../../static/indexImages/newtab4.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 4,
						name: '联系客服',
						image: ('../../static/indexImages/newtab5.png'),
						path: '', //如果要跳转页面的话
					},
				],
				tablist:[
					{
						id: 1,
						name: '全部商品',
						disabled: false
					},
					{
						id: 1,
						name: '秒返商品',
						disabled: false
					},
					{
						id: 1,
						name: '次月商品',
						disabled: false
					},
				],
				products: [ //产品数据
					{
						id: 658,
						image: ('../../static/logo.png'),
						name: '联通新海卡',
						describe: '19元月享160G大流量',
						price: '15',
						unit: '月',
						month: '月租19元',
						flow: '160G流量',
						tag: ['大流量', '次月返', '禁发区域'],
						tip: '套餐说明套餐，说明套餐说明说明套餐说明说明套餐说明说明套餐说明说明套餐说明说明套餐说明...',
						promoter: 'bin890315',
						ranking: 1, //排名，如果数据是排好序的话，也可以用index判断
						cardname:'星耀卡'
					},
					{
						id: 658,
						image: ('../../static/logo.png'),
						name: '联通新海卡',
						describe: '19元月享160G大流量',
						price: '15',
						unit: '月',
						month: '月租19元',
						flow: '160G流量',
						tag: ['大流量', '次月返', '禁发区域'],
						tip: '套餐说明套餐，说明套餐说明说明套餐说明...',
						promoter: 'bin890315',
						ranking: 2, //排名，如果数据是排好序的话，也可以用index判断
						cardname:'王者卡'
					},
					{
						id: 658,
						image: ('../../static/logo.png'),
						name: '联通新海卡',
						describe: '19元月享160G大流量',
						price: '15',
						unit: '月',
						month: '月租19元',
						flow: '160G流量',
						tag: ['大流量', '次月返', '禁发区域'],
						tip: '套餐说明套餐，说明套餐说明说明套餐说明...',
						promoter: 'bin890315',
						ranking: 3, //排名，如果数据是排好序的话，也可以用index判断
						cardname:'荣耀卡'
					}
				],
			}
		},
		methods:{
			handTab(){
				
			},
			change(e){
				console.log(e);
			},
			handPackageDescription(){
				
			},
			handTag(){
				
			},
			editGoodsFn(){
				
			},
			xiajia(){
				
			},
			handAddagent(){
				
			},
			Generateposter(){
				
			},
			allFenyong(){
				
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.swiper-item {
		width: 100%;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.tab_box {
		
		border-radius: 12rpx;
		padding: 24rpx;
	
		.tab_item {
			width: 20%;
			text-align: center;
	
			image {
				width: 74rpx;
				height: 74rpx;
	
			}
		}
	}
	.product-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
	
		.product-image-box {
			width: 260rpx;
			height: 260rpx;
			position: relative;
	
			.banner {
				width: 100%;
				height: 100%;
			}
	
			.ranking {
				width: 140rpx;
				height: 80rpx;
				position: absolute;
				left: -8rpx;
				top: 0;
			}
		}
	
		.product-conten {
			.copy {
				background-color: #04C15D;
				padding: 8rpx;
				border-radius: 6rpx;
				color: #fff;
	
				image {
					width: 24rpx;
					height: 24rpx;
				}
	
				.copyimage {
					width: 32rpx;
					height: 32rpx;
				}
			}
	
			.flow {
				.Verticalline {
					width: 0px;
					height: 24rpx;
					border: 1px solid #ABABAB;
				}
			}
	
			.describe {
				color: #5D5D5D;
			}
	
			.price {
				color: #FF600F;
			}
		}
	
		.tag-item {
			padding: 6rpx 10rpx;
			border-radius: 4px;
			margin-bottom: 6rpx;
		}
	
		.warning {
			color: #BA692A;
			background-color: #FDF3E8;
		}
	
		.primary {
			color: #1456FE;
			background-color: #E6F0F9;
		}
	
		.error {
			color: #F93A4A;
			background-color: #FFEAE8;
		}
		.tc-title{
			color: #000;
		}
		.tc-describe{
			border-top: 1px solid #E6E6E6;
		}
	}
</style>